<template>
  <div class="main">
    <PureTableBar title="接口分享" class="list_hei">
      <template #buttons>
        <el-button type="primary" @click="newShareVisible = true"> 新建分享 </el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
          :data="dataList" :columns="columns" :checkList="checkList" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :pagination="pagination" :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
          <template #operation="{ row }">
            <el-button type='primary' text @click="copyUrl(row)">
              复制链接
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
  </div>
  <el-dialog v-model="copyVisible" title="复制链接" width="30%" align-center :close-on-click-modal="false">
    <div style="display: flex; justify-content: center;align-items: center;">
      <p>成功复制链接！链接地址：{{ copyText }}</p>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="copyVisible = false" type="primary"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
  <ReDialog :width="550" :height="400" :models="newShareVisible" @Closes="cancelsaveNewShare(shareFrom)">
    <template #header>
      <h2 style="text-align: center;">新建分享</h2>
    </template>
    <template #main>
      <el-form :model="newShareFrom" label-width="100px" label-position="right" style="width: 80%; margin: 0 auto"
        ref="shareFrom" :rules="rule">
        <el-form-item label="标题：" prop="shareTitle">
          <el-input style="width:100%" v-model.trim="newShareFrom.shareTitle"></el-input>
        </el-form-item>
        <el-form-item label="分享接口：" prop="apiInfoDataShareId">
          <el-select v-model="newShareFrom.apiInfoDataShareId" style="width: 100%;" multiple collapse-tags>
            <!-- <el-select v-model="newShareFrom.apiInfoDataShareId" style="width: 100%;" multiple> -->
            <el-option v-for="(item, li) in GetAllDataListPage" :key="item.userApiInfoId" :label="item.userApiName"
              :value="item.userApiInfoId" />
          </el-select>
        </el-form-item>
        <el-form-item label="分享类型：" prop="shareType">
          <el-select style="width: 100%;" v-model="newShareFrom.shareType" @change="changeShareType()">
            <el-option label="私有" :value="1" />
            <el-option label="公开" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="安全性：" prop="safety" v-if="newShareFrom.shareType == 1">
          <el-select style="width: 100%;" v-model="newShareFrom.safety">
            <el-option label="有密码" :value="1" />
            <el-option label="无密码" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="密码：" v-if="newShareFrom.safety == '1'" prop="password">
          <el-input style="width:100%" v-model.trim="newShareFrom.password"></el-input>
        </el-form-item>
        <el-form-item label="有效期限：" prop="expiration">
          <el-select style="width: 100%;" v-model="newShareFrom.expiration">
            <el-option label="永久有效" :value="1" />
            <el-option label="三天失效" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否与存量客户合并：" prop="isInternalMerge">
          <el-radio-group v-model="newShareFrom.isInternalMerge">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="saveNewShare(shareFrom)" :loading="BtnLoading" type="primary">保存</el-button>
        <el-button @click="cancelsaveNewShare(shareFrom)">
          取消
        </el-button>
      </span>
    </template>
  </ReDialog>
</template>

<script setup lang="ts">
import { PureTableBar } from "@/components/RePureTableBar";
import { useCommon } from "./hook/bankDataShare";
import { ref } from "vue";
const shareFrom = ref();
const {
  rule,
  dataList,
  loading,
  pagination,
  BtnLoading,
  columns,
  copyVisible,
  newShareVisible,
  copyText,
  newShareFrom,
  copyUrl,
  saveNewShare,
  cancelsaveNewShare,
  GetAllDataListPage,
  handleSizeChange,
  handleCurrentChange,
  changeShareType
} = useCommon()
</script>

<style lang="scss" scoped>
@import url(@/style/CreditComm.scss);
</style>
